<template>
    <div class="flex">
        <Tree
            :type="1"
            :title="treeTitle"
            @selectTree="onSelectTree"
            :treeData="treeData"
        />
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <a-card>
                <TableTools
                    :hasSelected="hasSelected"
                    :selectId="removeId"
                    :hasSelectedModify="hasSelectedModify"
                    @modify="onModify"
                    @del="onToolsDel"
                />
                <a-table
                    class="ant-table-striped"
                    :row-selection="{
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                    }"
                    :pagination="{
                        onChange: onPageChange,
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    :rowClassName="
                        (record, index) =>
                            index % 2 === 1 ? 'table-striped' : null
                    "
                    size="small"
                    :loading="tableLoading"
                >
                    <template #sfzj="{ text }">
                        <a-tag color="#ed5565">{{ isKey(text.sfzj) }}</a-tag>
                    </template>
                    <template #operation="{ text: row }">
                        <a-tag color="#108ee9" @click="onEdit(row)">编辑</a-tag>
                        <!-- <a-popconfirm
                            title="你确定删除这条数据?"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onDel(row.id, index)"
                        >
                            <a-tag color="#ed5565">删除</a-tag>
                        </a-popconfirm> -->
                    </template>
                </a-table>
            </a-card>
            <Modal
                :visible="visible"
                :loading="loading"
                :title="title"
                :form="row"
                :type="type"
                @handleOk="onHandleConfirm"
                @handleCancel="onHandleCancel"
            />
        </div>
    </div>
</template>

<script lang="ts">
import * as API from "@/api/data-term";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import useRepositoryTable from "./useRepositoryTable";
import initTreeData from "./initTreeData";
import Modal from "@/components/modal/ModalT.vue";
import Tree from "@/components/tree/TreeG.vue";
import TableTools from "./components/tableTools.vue";
import Search from "./components/search.vue";
import { message } from "ant-design-vue";
interface FormState {
    sjjid: string;
    zdmc: string;
    zdms: String;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
}
interface Store {
    tableLoading: boolean;
    treeTitle: string;
    loading: boolean;
    visible: boolean;
    title: String;
    row: any;
    type: number;
    onSearchList: (formState: FormState) => void;
    onModify: () => void;
    onToolsDel: () => void;
    onPageChange: (currentPage: number) => void;
    onHandleConfirm: (form: any) => void;
    onHandleCancel: () => void;
    onEdit: (row: any) => void;
    onDel: (id: string, index: number) => void;
    onSelectTree: (type: string) => void;
    isKey: (type: string | null) => string;
}
export default defineComponent({
    name: "DataTerm",
    setup() {
        const formState = reactive<FormState>({
            sjjid: "",
            zdmc: "",
            zdms: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
        });
        const columns = [
            { title: "字段名称", dataIndex: "zdmc", key: "zdmc" },
            { title: "字段描述", dataIndex: "zdms", key: "zdms" },
            { title: "字段类型", dataIndex: "sjlx", key: "sjlx" },
            { title: "字段长度", dataIndex: "zdcd", key: "zdcd" },
            {
                title: "是否主键",
                key: "sfzj",
                slots: { customRender: "sfzj" },
            },
            { title: "字段排序", dataIndex: "plxx", key: "plxx" },
            {
                title: "操作",
                key: "operation",
                slots: { customRender: "operation" },
            },
        ];
        const {
            total,
            repositories,
            getUserRepositories,
        } = useRepositoryNameSearch(formState);
        const { getTreeData, treeData } = initTreeData();
        onMounted(() => {
            getUserRepositories();
            getTreeData();
        });
        const {
            state,
            hasSelected,
            onSelectChange,
            hasSelectedModify,
        } = useRepositoryTable();
        const store = reactive<Store>({
            tableLoading: false,
            treeTitle: "数据表信息",
            loading: false,
            visible: false,
            title: "",
            type: 0,
            row: {},
            onSearchList: (formState) => {
                store.tableLoading = true;
                formState = formState;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onModify: () => {
                store.onEdit(state.currItem);
            },
            onToolsDel: () => {
                getUserRepositories();
            },
            onPageChange: (currentPage) => {
                store.tableLoading = true;
                formState.pageNum = currentPage;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onHandleConfirm: (form) => {
                store.loading = true;
                switch (store.type) {
                    case 1:
                        API.submitFormApi(form).then(({ msg }: any) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    default:
                        break;
                }
            },
            onHandleCancel: () => {
                store.loading = false;
                store.visible = false;
            },
            onEdit: (row) => {
                store.row = row;
                store.loading = false;
                store.visible = true;
                store.title = "编辑数据源";
                store.type = 1;
            },
            onDel: (id, index) => {
                API.remove(id).then(({ msg }: any) => {
                    repositories.value.splice(index, 1);
                    message.success(msg);
                });
            },
            onSelectTree: (type) => {
                formState.sjjid = type;
                getUserRepositories();
            },
            isKey: (type) => {
                return type && type === "1" ? "是" : "否";
            },
        });

        return {
            total,
            formState,
            repositories,
            columns,
            onSelectChange,
            hasSelected,
            hasSelectedModify,
            ...toRefs(state),
            ...toRefs(store),
            treeData,
        };
    },
    components: {
        Search,
        TableTools,
        Modal,
        Tree,
    },
});
</script>
<style lang="less" scoped>
.ant-table-striped :deep(.table-striped) {
    background-color: #fafafa;
}
</style>